<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>陆运订单录入列表</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
</head>

<body>
  <div id="app">
    <div class="vue-wrapper">
      <div class="search-wrapper">
        <Row :gutter="16">
          <i-col span="5">
            <div class="search-input common-input">
              <span class="prepend">业务单号</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.orderNumber" />
              </div>
            </div>
          </i-col>
          <i-col span="5">
            <div class="search-input common-input">
              <span class="prepend">发货人</span>
              <div class="search-input-flex common-input-flex">
                <i-input v-model="search.sender" />
              </div>
              <span class="append">
                <a href="" class="ivu-icon ivu-icon-md-close"></a>
                <a href="" class="ivu-icon ivu-icon-ios-search"></a>
              </span>
            </div>
          </i-col>
          <i-col span="7">
            <div class="search-data common-input">
              <span class="prepend">订单日期</span>
              <div class="common-input-flex">
                <date-picker type="date" v-model="search.startDate"></date-picker>
              </div>
              <i class="input-line">—</i>
              <div class="common-input-flex">
                <date-picker type="date" v-model="search.endDate"></date-picker>
              </div>
            </div>
          </i-col>
          <i-col span="5">
            <div class="search-select common-input">
              <span class="prepend">发单状态</span>
              <div class="common-input-flex">
                <i-select v-model="search.status">
                  <i-option v-for="item in search.billingStatus" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
              </div>
            </div>
          </i-col>
          <i-col span="2">
            <div class="search-stretch" @click="toggleSearch()">
              <i class="ivu-icon ivu-icon-ios-arrow-up" ref="toggleicon"></i>
              <span ref="toggleText">收起查询</span>
            </div>
          </i-col>
        </Row>
        <div class="hide-search" v-if="hideSearch">
          <Row :gutter="16">
            <i-col span="5">
              <div class="search-select common-input">
                <span class="prepend">是否冷链</span>
                <div class="common-input-flex">
                  <i-select v-model="search.selectColdChain">
                    <i-option v-for="item in search.coldChain" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
            <i-col span="5">
              <div class="search-select common-input">
                <span class="prepend">是否专车</span>
                <div class="common-input-flex">
                  <i-select v-model="search.selectSpecialCar">
                    <i-option v-for="item in search.specialCar" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
            <i-col span="7">
              <div class="search-select common-input">
                <span class="prepend">配送方式</span>
                <div class="common-input-flex">
                  <i-select v-model="search.selectDelivery">
                    <i-option v-for="item in search.delivery" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                  </i-select>
                </div>
              </div>
            </i-col>
            <i-col span="2" class="fr tar">
              <a class="ivu-icon ivu-icon-ios-search search-btn2" @click="searchBtn">查询</a>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="page-content">
        <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2>
        <i-table :columns="tableColumn" :data="tableData" ref="selection" stripe></i-table>
        <div style="margin: 10px;overflow: hidden">
            <div class="tac">
                <Page :total="tableDataRecords" :current.sync="pageIndex" :page-size="5" @on-change="changePage"></Page>
            </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        hideSearch: true,
        search: {
          orderNumber: '',
          sender: '',
          startDate: '',
          endDate: '',
          status: '',
          billingStatus: [{
              value: '未发单',
              label: '未发单'
            },
            {
              value: '已发单',
              label: '已发单'
            }
          ],
          selectColdChain: '',
          coldChain: [{
              value: '全部',
              label: '全部'
            },
            {
              value: '普货',
              label: '普货'
            },
            {
              value: '冷链',
              label: '冷链'
            }
          ],
          selectSpecialCar: '',
          specialCar: [{
            value: '全部',
            label: '全部'
          }, {
            value: '是',
            label: '是'
          }, {
            value: '否',
            label: '否'
          }],
          selectDelivery: '',
          delivery: [{
            value: '全部',
            label: '全部'
          }, {
            value: '平台配送',
            label: '平台配送'
          }, {
            value: '自提',
            label: '自提'
          }]
        },
        tableColumn: [
          {
            type: 'selection',
            width: 40,
            align: 'right'
          },
          {
            // type: 'index',
            title: '序号',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('span', 
                (appLayout.pageIndex -1) * 5 + (params.index + 1)
              )
            }
          },
          {
            title: '发货人',
            key: 'sender',
            align: 'center'
          },
          {
            title: '业务单号',
            key: 'orderNumber',
            width: 130,
            align: 'center'
          },
          {
            title: '发货地址',
            key: 'sendAddress',
            align: 'center'
          },
          {
            title: '联系电话',
            key: 'tel',
            width: 100,
            align: 'center'
          },
          {
            title: '制单日期',
            key: 'billingDate',
            width: 90,
            align: 'center'
          },
          {
            title: '件数',
            key: 'pieces',
            width: 80,
            align: 'center'
          },
          {
            title: '冷链',
            key: 'coldChain',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.coldChain == "是" ? "font-gray" : "font-orange" },
                  params.row.coldChain
                )
              ]);
            }
          },
          {
            title: '专车',
            key: 'specialCar',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.specialCar == "是" ? "font-gray" : "font-orange" },
                  params.row.specialCar
                )
              ]);
            }
          },
          {
            title: '中转',
            key: 'transfer',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.transfer == "是" ? "font-gray" : "font-orange" },
                  params.row.transfer
                )
              ]);
            }
          },
          {
            title: '自提',
            key: 'selfLifting',
            width: 40,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: params.row.selfLifting == "是" ? "font-gray" : "font-orange" },
                  params.row.selfLifting
                )
              ]);
            }
          },
          {
            title: '高度预警',
            key: 'warning',
            width: 110,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', 
                  { class: "font-red" },
                  params.row.warning
                )
              ]);
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  }
                }, '详情'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  }
                }, '发单'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () =>{
                      
                    }
                  }
                }, '作废')
              ]);
            }
          }
        ],
        tableDataRecords: 0,
        tableData: [],
        pageIndex: 1
      },
      mounted() {
        this.getTableData()
      },
      methods: {
        // 头部查询框伸缩
        toggleSearch() {
          this.$refs.toggleText.innerText = !this.hideSearch ? '收起查询' : '展开查询'
          this.$refs.toggleicon.style.transform = !this.hideSearch ? 'rotate(0)' : 'rotate(180deg)'
          this.hideSearch = !this.hideSearch
        },
        // 获取表格数据
        getTableData() {
          // 获取选中的数据
          // console.log(this.$refs.selection.getSelection())
          var self=this;
          self.tableData=[];
          axios.get('static/order.json').then(response => {
            //this.tableData = response.data.Datas;
            response.data.Datas.forEach(function(item,i){
              // i初始值为0
              i = (self.pageIndex-1)*5+i;

              if(i<(5*(self.pageIndex))){
                self.tableData.push({    
                  sender: "武汉铭德无双科技有限公司分公司",
                  orderNumber: i,
                  sendAddress: "恒安泰医药集团",
                  tel: "13845228928",
                  billingDate: "2018-09-28",
                  pieces: "987407 件",
                  coldChain: "否",
                  specialCar: "否",
                  transfer: "否",
                  selfLifting: "否",
                  warning: "已逾期！请处理"
                });
              }
            });
            this.tableDataRecords = response.data.TotalRecords;
          })
          
        },
        changePage(e) {
          this.pageIndex = e;
          this.getTableData();
        },
        searchBtn(){
          alert(0)
        }
      }
    })
  </script>
</body>

</html>